<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页挂卡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .card-container {
            perspective: 1000px;
            width: 350px;
            height: 200px;
            position: relative;
        }

        .card {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
        }

        .card:hover {
            transform: rotateY(15deg) rotateX(10deg) translateZ(20px);
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .card-front {
            background: linear-gradient(135deg, rgba(86, 171, 255, 0.3) 0%, rgba(0, 123, 255, 0.3) 100%);
        }

        .card-back {
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 71, 87, 0.3) 100%);
            transform: rotateY(180deg);
        }

        .floating {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0px) rotateY(0deg);
            }
            50% {
                transform: translateY(-20px) rotateY(180deg);
            }
            100% {
                transform: translateY(0px) rotateY(360deg);
            }
        }

        .glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(86, 171, 255, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            animation: pulse 4s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(0.8);
                opacity: 0.7;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.3;
            }
            100% {
                transform: translate(-50%, -50%) scale(0.8);
                opacity: 0.7;
            }
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -2;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            animation: drift 20s infinite linear;
            box-shadow: 0 0 10px rgba(86, 171, 255, 0.8);
        }

        @keyframes drift {
            from {
                transform: translateY(100vh) translateX(0);
            }
            to {
                transform: translateY(-100vh) translateX(100px);
            }
        }

        h1 {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2.5rem;
            text-shadow: 0 0 20px rgba(86, 171, 255, 0.7);
            letter-spacing: 2px;
            animation: glow-text 2s ease-in-out infinite alternate;
        }

        @keyframes glow-text {
            from {
                text-shadow: 0 0 10px rgba(86, 171, 255, 0.5);
            }
            to {
                text-shadow: 0 0 30px rgba(86, 171, 255, 1), 0 0 40px rgba(86, 171, 255, 0.8);
            }
        }

        .flip-button {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 30px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .flip-button:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateX(-50%) translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .flip-button:active {
            transform: translateX(-50%) translateY(1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>
    <div class="glow"></div>
    
    <h1>神秘卡片</h1>
    
    <div class="card-container floating">
        <div class="card" id="card">
            <div class="card-face card-front">
                <span>点击翻转</span>
            </div>
            <div class="card-face card-back">
                <span>惊喜！</span>
            </div>
        </div>
    </div>
    
    <button class="flip-button" onclick="flipCard()">翻转卡片</button>

    <script>
        let isFlipped = false;
        
        function flipCard() {
            const card = document.getElementById('card');
            if (!isFlipped) {
                card.style.transform = 'rotateY(180deg)';
                isFlipped = true;
            } else {
                card.style.transform = 'rotateY(0deg)';
                isFlipped = false;
            }
        }
        
        // 点击卡片也可以翻转
        document.getElementById('card').addEventListener('click', flipCard);
        
        // 创建粒子效果
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 20 + 's';
                particle.style.animationDuration = (Math.random() * 20 + 10) + 's';
                particle.style.opacity = Math.random() * 0.5 + 0.3;
                particle.style.width = (Math.random() * 4 + 2) + 'px';
                particle.style.height = particle.style.width;
                particlesContainer.appendChild(particle);
            }
        }
        
        // 页面加载时创建粒子
        window.onload = function() {
            createParticles();
        };
        
        // 添加鼠标移动视差效果
        document.addEventListener('mousemove', function(e) {
            const card = document.getElementById('card');
            const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
            const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
            
            if (!isFlipped) {
                card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
            }
        });
        
        // 鼠标离开卡片时恢复原位
        document.getElementById('card').addEventListener('mouseleave', function() {
            if (!isFlipped) {
                this.style.transform = 'rotateY(0deg) rotateX(0deg)';
            }
        });
    </script>
</body>
</html>